<template>
    <view class="container">
        <view class="user-section">
            <view class="vip-card-box" style="background-image: url(/static/images/card_bg.png);background-size: 100% 100%;">
                <view class="text-white text-xxlx text-center padding-top-lg margin-top-lg">{{ usercoin }}</view>
                <view class="text-white text-lg text-center padding-top-sm">可用余额(元)</view>
            </view>
        </view>
        <view class="cu-form-group margin-lr-lg border-b-line padding-0">
            <view class="title text-white">预约金额</view>
        </view>
        <view class="cu-form-group margin-lr-lg border-b-line padding-0">
            <text class="text-price text-xxlx text-white"></text>
            <input v-model="amount" class="text-xxlx text-white" style="color: #fff;" type="number" focus placeholder="0.00" @input="inputChange">
        </view>
        <view class="cu-list menu" v-if="coupons.length > 0 && projectItem.coupon == 1">
            <view class="cu-item arrow" style="background: none;">
                <picker @change="bindPickerChange" :value="current" :range="coupons" range-key="name" style="width: 100%;">
                    <view class="padding-sm text-lg text-center">{{ coupons[current].name }}</view>
                </picker>
            </view>
        </view>
        <view class="cu-list menu" v-if="coupons.length > 0 && projectItem.jiaxiquan == 1">
            <view class="cu-item arrow" style="background: none;">
                <picker @change="bindPickerJiaxiquan" :value="jiaxiquan_current" :range="jiaxiquan" range-key="name" style="width: 100%;">
                    <view class="padding-sm text-lg text-center">{{ jiaxiquan[jiaxiquan_current].name }}</view>
                </picker>
            </view>
        </view>
        <view class="padding">
            <view class="cuIcon-squarecheckfill text-blue">
                <text class="text-grey text-sm margin-lr-sm">同意<text class="text-blue" @click="navToUrl('/pages/help/other?type=project_agree')">《签约协议》</text>，并知晓签约后未到期不可中途停止</text>
            </view>
        </view>
        <view class="margin-lr-lg padding-0 submit_btn" v-if="projectItem.min">
            <button  class="cu-btn" type="button" @click="submit()">立即签约</button>
        </view>
        <view class="padding-lg">
            <text class="text-grey">现在签约，{{ projectItem.profitdate }}产生算力，锁定{{ projectItem.day }}天，期间不可转出</text>
        </view>

        <view :class="[modalName == 'showPayPwd' ? 'cu-modal show' : 'cu-modal']">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">支付密码</view>
                    <view class="action">
                        <text class="cuIcon-close text-red" @click="hideModal()"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    <view>
                        <view class="flex-box padding-bottom-sm text-sm"></view>
                        <validcode ref="validcode" :maxlength="6" :isPwd="true" @finish="finish"></validcode>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import validcode from "@/components/validCode/validCode.vue";
    export default {
        components: {
            validcode
        },
        data() {
            return {
                modalName: null,
                code: "",
                amount: 0,
                profitVal: 0,
                beginTips: "",
                projectItem: {},
                coupons: [],
                current: 0,
                coupon_id: 0,
                jiaxiquan: [],
                jiaxiquan_current: 0,
                jiaxiquan_id: 0,
                usercoin: 0,
                isloaded: false,
                isLoading: false,
                isSubmit: false
            }
        },
        onLoad: function (option) {
            this.code = option.code;
            this.loadData();
            this.getInvestCoupons();
            this.getJiaxiquan();
        },
        onNavigationBarButtonTap(val) {
            uni.navigateTo({
                url: '/pages/help/other?type=project_rule',
            });
        },
        methods: {
            loadData: function () {
                var info = uni.getStorageSync("userinfo");
                let timestamp = this.helper.now();
                let sign = this.helper.setSign(['code=' + this.code, 'token=' + info.token, 'timestamp=' + timestamp]);
                this.helper.req({
                    api: "getInvestDetail",
                    timestamp: timestamp,
                    data: { code: this.code, token: info.token },
                    header: { sign: sign },
                    method: 'GET',
                }).then(res => {
                    this.projectItem = res.data.data.projectItem;
                    this.maxnum = parseInt(this.projectItem.max);
                    //this.amount = this.projectItem.min;

                    this.usercoin = res.data.data.usercoin;
                })
            },
            getInvestCoupons: function () {
                if (this.loading) return false;
                this.loading = true;
                var info = uni.getStorageSync("userinfo");
                let timestamp = this.helper.now();
                let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' + timestamp]);
                this.helper.req({
                    api: "getInvestCoupons",
                    timestamp: timestamp,
                    data: { token: info.token },
                    header: { sign: sign },
                    method: 'GET',
                }).then(res => {
                    this.coupons = res.data.data.list;
                })
            },
            getJiaxiquan: function () {
                if (this.jiazai) return false;
                this.jiazai = true;
                var info = uni.getStorageSync("userinfo");
                let timestamp = this.helper.now();
                let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' + timestamp]);
                this.helper.req({
                    api: "getJiaxiquan",
                    timestamp: timestamp,
                    data: { token: info.token },
                    header: { sign: sign },
                    method: 'GET',
                }).then(res => {
                    this.jiaxiquan = res.data.data.list;
                })
            },
            inputChange: function (e) {
                this.amount = e.target.value;
                this.isSubmit = !(parseFloat(e.target.value) > 0);
            },
            bindPickerChange: function (e) {
                this.current = e.detail.value;
                this.coupon_id = this.coupons[this.current].id;
                // console.log(this.coupon_id);
            },
            bindPickerJiaxiquan: function (e) {
                this.jiaxiquan_current = e.detail.value;
                this.jiaxiquan_id = this.jiaxiquan[this.jiaxiquan_current].id;
                // console.log(this.coupon_id);
            },
            navToUrl: function (url) {
                return uni.navigateTo({
                    url: url
                });
            },
            submit: function () {
                if (!this.isSubmit) {
                    this.isSubmit = true;
                    if (parseFloat(this.amount) > parseFloat(this.usercoin)) {
                        uni.showToast({
                            title: "超出可用金额",
                            icon: "none"
                        })
                        this.isSubmit = false;
                        return;
                    }
                    this.modalName = "showPayPwd";
                }
            },
            finish: function (e) {
                this.modalName = null;
                if (e.length < 6) {
                    uni.showToast({
                        title: "密码无效",
                        icon: "none"
                    })
                    this.isSubmit = false
                    return;
                }
                this.isSubmit = true;
                var info = uni.getStorageSync("userinfo");
                let timestamp = this.helper.now();
                let sign = this.helper.setSign(['pwd=' + e, 'amount=' + parseFloat(this.amount), 'jiaxiquan_id=' + this.jiaxiquan_id, 'coupon_id=' + this.coupon_id, 'code=' + this.code, 'timestamp=' + timestamp, 'token=' + info.token]);
                this.helper.req({
                    api: "createInvestOrder",
                    timestamp: timestamp,
                    data: { pwd: e, amount: parseFloat(this.amount), jiaxiquan_id: this.jiaxiquan_id, coupon_id: this.coupon_id, code: this.code, token: info.token },
                    header: { sign: sign },
                    method: 'POST',
                }).then(res => {
                    uni.redirectTo({
                        url: "/pages/invest/orders"
                    })
                })
            },
            hideModal: function () {
                this.modalName = null,
                this.isSubmit = false
            },
        }
    }
</script>


<style lang="scss">
page {
    background-color: #0D1A44;
}
	.vip-card-box {
		height: 260upx;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 0 20upx 24upx;
		margin: 0 20upx 0;
		line-height: 50upx;
		z-index: 10
	}
	input.text-xxlx{
		font-size: 50upx;
	}
</style>